<template>
  <div class="tree-box">
    <el-input
      v-model="filterText"
      placeholder="按回车搜索" />
    <el-scrollbar class="sh mt8">
      <el-tree
        ref="treeRef"
        :data="data"
        :icon="Icon"
        :props="defaultProps"
        :highlight-current="true"
        :expand-on-click-node="true"
        :filter-node-method="filterNode"
        @node-click="handleNodeClick"
      />
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import type { ITree } from '@/types/tree'
import { watch, ref } from 'vue'
import Icon from './Icon.vue'
// import { useRouter } from 'vue-router';
// import { usePVParameters } from '@/store/pvParameters.js'
// const store = usePVParameters()
// const router = useRouter();
defineProps<{
  data: ITree[];
}>()
const defaultProps = {
  children: 'children',
  label: 'label'
}
const filterText = ref('')
const treeRef = ref()
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
const filterNode = (value: string, data: ITree) => {
  if (!value) return true
  return data.label.includes(value)
}

// const idMapType:IType  = {
//   '5': 'device',
//   '4': 'group',
//   '3': 'station',
//   '2': 'site',
//   '1': 'company'
// };
const handleNodeClick = (node: ITree) => {
  console.log('node:', node)
  // const { type, id } = node;
  // router.push({
  //   path: `/pvMonitor/table/${type as string}/${id}`
  // })
}
</script>

<style lang="scss" scoped>
$color: #fff;
$active: #29f1fa;
.sh {
  height: calc(100% - 3rem - 0.8rem);
}
.tree-box {
  flex-shrink: 0;
  padding: 1.5rem;
  box-sizing: border-box;
}

:deep(.el-input) {
  background: transparent;
  .el-input__wrapper {
    background: transparent;
    .el-input__inner {
      background: transparent;
      color: $color;
    }
  }
}

:deep(.el-tree) {
  background: transparent;
  font-size: 1.4rem;
}
:deep(.el-tree-node__expand-icon) {
  color: $active;
}
:deep(.el-tree-node:hover .el-tree-node__content) {
  background-color: transparent !important;
}
:deep(.el-tree-node__content) {
  background-color: transparent !important;
}
:deep(.el-tree-node__content:hover) {
  background-color: transparent !important;
  span {
    color: $active;
  }
}
:deep(.el-tree-node__label) {
  color: $color;
}
:deep(.el-tree-node.is-current > .el-tree-node__content) {
  background-color: transparent;
  span {
    color: $active;
  }
}
:deep(.el-icon.el-tree-node__expand-icon) {
  transform: none;
  margin-right: 5px;
  &::before {
    content: '[ + ]';
    font-style: normal;
  }
}
:deep(.el-icon.el-tree-node__expand-icon.expanded) {
  transform: none;
  &::before {
    content: '[ - ]';
    font-style: normal;
  }
}
:deep(.el-icon.el-tree-node__expand-icon.is-leaf) {
  transform: none;
  &::before {
    content: '■';
    font-style: normal;
  }
}
</style>
